<template>
  <div id="detail">
      <detail-nav-bar @tabClick="tabClick" ref="nav" class="nav"></detail-nav-bar>
      
      <scroll class="content" ref="scroll"
      :pull-up-load="true"
      @scroll="contentScroll"
      :probe-type="3"
    >   
          <detail-swiper :top-images="topImages"></detail-swiper>
          <detail-base-info :goods="goods"></detail-base-info>
          <detail-shop-info :shop="shop"></detail-shop-info>
          <detail-goods-info :detail-info="detailInfo" @imgLoad=" goodsImgLoad"></detail-goods-info>
          <detail-param-info ref="params" :param-info="paramInfo" ></detail-param-info>
          <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
          <goods-list ref="recommend" :goods="recommends"></goods-list>
      </scroll>
      
      <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
      <detail-bottom-bar class="bottom-bar" @addCart="addToCart"></detail-bottom-bar>
      <!-- <toast :message="message" :show="show"></toast> -->
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar.vue'
import DetailSwiper from './childComps/DetailSwiper.vue'
import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
import DetailShopInfo from './childComps/DetailShopInfo.vue'
import Scroll from '../../components/common/scroll/Scroll.vue'
import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
import DetailParamInfo from './childComps/DetailParamInfo.vue'
import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
import DetailBottomBar from './childComps/DetailBottomBar.vue'
import BackTop from '../../components/content/backTop/BackTop.vue'
// import Toast from '../../components/common/toast/Toast.vue'

import {getDetail,Goods,Shop,GoodsParam,getRecommend} from '../../network/detail.js'
import {debounce} from '../../common/debounce.js'

import GoodsList from '../../components/content/goods/GoodsList.vue'
export default {
    name:'Detail',
    components:{
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        Scroll,
        DetailGoodsInfo,
        DetailParamInfo,
        DetailCommentInfo,
        GoodsList,
        DetailBottomBar,
        BackTop,
        // Toast
    },
    data(){
        return {
            iid:null,
            topImages:[],
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            commentInfo:{},
            recommends:[],
            themeTopY:[],
            getThemeTopY:null,
            currentIndex:0,
            isShowBackTop:false,
            // message:'',
            // show:false,
        }
    },
    activated () {
      this.$refs.scroll.refresh()
      this.$refs.scroll.scrollTo(0,this.saveY,0)
      
    },
    
    methods: {
        tabClick(index){
        this.$refs.scroll.scrollTo(0,-this.themeTopY[index],200)
        },
        goodsImgLoad() {
			this.getThemeTopY()
		},
        contentScroll(position){
            //返回顶部是否显示
				this.isShowBackTop = (-position.y) > 1000;
                //随点击切换到位置
				const positionY = -(position.y);
				let _lenth = this.themeTopY.length;
				for(let i = 0; i < _lenth - 1; i++){
					if(this.currentIndex !== i && (positionY >= this.themeTopY[i] && positionY < this.themeTopY[i+1])){
						this.currentIndex = i;
						this.$refs.nav.currentIndex = this.currentIndex;
					}
				}
        },
        backClick(){
        this.$refs.scroll.scrollTo(0,0)
      },  
        addToCart(){
            // 获取购物车需要展示的信息
            const product = {}
            product.image = this.topImages[0];
            product.title = this.goods.title;
            product.desc = this.goods.desc;
            product.price = this.goods.realPrice;
            product.iid = this.iid;
            // 将商品加入购物车
            // this.$store.commit('addCart',product)
            // dispatch做个调用到vuex中  任务分发
            this.$store.dispatch('addCart',product).then(res =>{
                // this.show = true;
                // this.message = res;

                // setTimeout(() => {
                //     this.show = false;
                //     this.message = ''
                // },2000)
                console.log(this.$toast);
                this.$toast.show(res,2000)
            })
        }
    },
    created(){
        // 保存传入的iid
        this.iid = this.$route.params.iid

        // 根据iid请求详情数据
        getDetail(this.iid).then(res =>{
            // 获取顶部轮播数据
            
            const data = res.result
            this.topImages = data.itemInfo.topImages
            console.log(res);
            // 获取商品信息
            this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
            // 创建店铺信息的对象
            this.shop = new Shop(data.shopInfo)
            // 保存商品的详细数据
            this.detailInfo = data.detailInfo
            // 获取商品尺寸信息
            this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
            // 获取评论信息
            if(data.rate.cRate !== 0){
                this.commentInfo = data.rate.list[0]
            }
            // nextTick就是渲染完回调这个函数
            // this.$nextTick(() =>{
                // 根据最新的数据，对应的DOM已经渲染出来了，但图片没有被渲染
            //     this.themeTopY = []
            //     this.themeTopY.push(0);
            //     this.themeTopY.push(this.$refs.params.$el.offsetTop)
            //     this.themeTopY.push(this.$refs.comment.$el.offsetTop)
            //     this.themeTopY.push(this.$refs.recommend.$el.offsetTop)
            //     console.log(this.themeTopYs);
            // })
            
        })
        // 请求推荐数据
        getRecommend().then(res =>{
            this.recommends = res.data.list
        })
        // 给getThemeTopY赋值
        this.getThemeTopY = debounce(() =>{
            this.$refs.scroll.refresh();
            this.themeTopY = [];
			this.themeTopY.push(0);
			this.themeTopY.push(this.$refs.params.$el.offsetTop);
			this.themeTopY.push(this.$refs.comment.$el.offsetTop  );
			this.themeTopY.push(this.$refs.recommend.$el.offsetTop );
            this.themeTopY.push(Number.MAX_VALUE)
            
            
        },100)
    }
}
</script>

<style scoped>
#detail {
    height: 100vh;
    position: relative;
   
    z-index: 10;
    background-color: #fff;
}

.content {
    /* position: absolute;
    top: 44px;
    bottom: 60px;
    right: 0; */
    position: relative;
    height: calc(100% - 44px - 58px);
    overflow: hidden;
  }


</style>